<template>
  <div class="news" v-if="list && list.length > 0">
    <div class="wCen animate__fadeInUp ">
      <div class="homeTitle">
        <span class="homeTitle_l">{{ $t("news-t1") }} </span>
        <span class="homeTitle_r" v-if="localeCn">NEWS</span>
      </div>
      <div class="homeMore" @click="go2News">
        <span class="homeMore_r"></span>
      </div>
      <div class="newsBox">
        <div class="list">
          <div class="item hand" @click="go2NewsDetail(item)" v-for="(item, idx) in list" :key="idx">
            <div class="imgBox">
              <img :src="item.coverImgUrl" class="img" />
            </div>
            <div class="content">
              <div class="newsTitle text_e text_e-1">
                {{ item.title }}
              </div>
              <div class="date">{{ parseDate(item.pushTime) }}</div>
              <div class="desc text_e text_e-2">
                {{ item.summary }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getList } from "@/api/news";
import util from "@/libs/util";
export default {
  computed: {},
  data() {
    return {
      list: [],
      form: {
        pageSize: 4,
        pageNum: 1,
        isHome: 1,
        orderByColumn: "homeSortOrder",
        isAsc: "asc",
      },
    };
  },
  mounted() {
    this.getListFun();
  },
  methods: {
    getListFun() {
      this.invoke(getList, this.form).then((res) => {
        if (res && res.code == 200) {
          if (res.rows && res.rows.length > 0) {
            this.list = res.rows;
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.news {
  background-color: #fff;
  padding: 130px 0 120px;
  .homeTitle {
    margin-bottom: 50px;
  }
  .homeMore {
    margin-bottom: 72px;
  }
  .newsBox {
    .list {
      $g: 80px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: $g;
      .item {
        background-color: #f1f1f1;
        display: flex;
        padding: 40px;
        overflow: hidden;
        box-sizing: border-box;
        .imgBox {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 240px;
          height: 135px;
          flex-shrink: 0;
          border-radius: 6px;
          overflow: hidden;
          background-color: #fff;

          .img {
            max-width: 100%;
            max-height: 100%;
            transition: transform 0.2s linear;
          }
        }
        .content {
          padding-left: 40px;
          overflow: hidden;
        }
        .newsTitle {
          font-size: 24px;
          color: #000;
          margin-bottom: 10px;
          display: inline-block;
        }
        .date {
          font-size: 16px;
          margin-bottom: 30px;
          color: rgba(0, 0, 0, 0.6);
        }
        .desc {
          font-size: 16px;
          color: rgba(0, 0, 0, 0.6);
        }
        &:hover {
          background-color: #e75197;
          .newsTitle,
          .desc,
          .date {
            color: #fff;
          }
        }
      }
    }
  }
  @media (min-width: 1441px) and (max-width: 1750px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_1600});
    }
    padding: scale(100px) 0 ;
    .homeTitle {
      margin-bottom: scale(50px);
    }
    .homeMore {
      margin-bottom: scale(72px);
    }
    .newsBox {
      .list {
        $g: scale(80px);
        gap: $g;
        .item {
          padding: scale(40px);
          .imgBox {
            width: scale(240px);
            height: scale(135px);
          }
          .content {
            padding-left: scale(40px);
          }
          .newsTitle {
            font-size: scale(24px);
          }
          .date {
            font-size: scale(16px);
            margin-bottom: scale(30px);
          }
          .desc {
            font-size: scale(16px);
          }
        }
      }
    }
  }
  @media screen and (min-width: 1281px) and (max-width: 1440px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_1440});
    }
    padding: scale(100px) 0 ;
    .homeTitle {
      margin-bottom: scale(50px);
    }
    .homeMore {
      margin-bottom: scale(72px);
    }
    .newsBox {
      .list {
        $g: scale(80px);
        gap: $g;
        .item {
          padding: scale(40px);
          .imgBox {
            width: scale(240px);
            height: scale(135px);
          }
          .content {
            padding-left: scale(40px);
          }
          .newsTitle {
            font-size: scale(24px);
          }
          .date {
            font-size: scale(16px);
            margin-bottom: scale(30px);
          }
          .desc {
            font-size: scale(16px);
          }
        }
      }
    }
  }
  @media screen and (min-width: 768px) and (max-width: 1280px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_1280});
    }
    padding: scale(100px) 0 ;
    .homeTitle {
      margin-bottom: scale(50px);
    }
    .homeMore {
      margin-bottom: scale(72px);
    }
    .newsBox {
      .list {
        $g: scale(80px);
        gap: $g;
        .item {
          padding: scale(40px);
          .imgBox {
            width: scale(240px);
            height: scale(135px);
          }
          .content {
            padding-left: scale(40px);
          }
          .newsTitle {
            font-size: scale(24px);
          }
          .date {
            font-size: scale(16px);
            margin-bottom: scale(30px);
          }
          .desc {
            font-size: scale(16px);
          }
        }
      }
    }
  }
  @media (max-width: 767px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_750});
    }
    padding: 40px 0 0px;
    .homeTitle {
      margin-bottom:20px;
    }
    .homeMore {
      margin-bottom: scale(72px);
    }
    .newsBox {
      .list {
        $g: 20px;
        gap: $g;
        grid-template-columns: repeat(1, 1fr);
        .item {
          padding: scale(40px);
          .imgBox {
            width: scale(240px);
            height: scale(135px);
          }
          .content {
            padding-left: scale(40px);
          }
          .newsTitle {
            font-size: scale(24px);
          }
          .date {
            font-size: scale(16px);
            margin-bottom: scale(30px);
          }
          .desc {
            font-size: scale(16px);
          }
        }
      }
    }
  }
}
</style>
